<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>Selectors index</title>
<meta name="Description" content="CSS选择符: CSS Selectors Module" />
<meta name="Keywords" content="CSS Selectors, css选择符" />
<meta name="author" content="doyoe(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<meta name="robots" content="all" />
<!--[if lte IE 8]>
<script src="../js/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="../skin/article.css" />
</head>
<body>
<nav id="guide" class="g-mod">
	<div class="from">
		<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
		<span>&#187;</span>
		<span id="category" rel="selectors" name="index">选择符列表</span>
	</div>
	<div class="to">
		<span class="label">相关内容：</span>
		<div class="g-combobox g-transition">
			<a href="?" class="g-transition target">
				<strong>其它选择符参考</strong>
				<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
			</a>
			<div class="g-transition list">
				<ul>
					<!-- 插入分类快速导航 -->
				</ul>
			</div>
		</div>
	</div>
</nav>
<header id="hd">
	<section id="title" class="g-mod">
		<h1 class="tit">CSS Selectors Module</h1>
		<ul class="info">
			<li>CSS选择符集合</li>
		</ul>
		<!-- 插入浏览器信息 -->
	</section>
</header>
<section id="bd">
	<section id="element" class="g-mod g-attr">
		<h2 class="tit"><a href="element/index.htm">元素选择符 Element Selectors</a></h2>
		<div class="cont">
			<ul class="g-list g-clear">
				<li><a href="element/all.htm">*</a></li>
				<li><a href="element/e.htm">E</a></li>
				<li><a href="element/id.htm">E#id</a></li>
				<li><a href="element/class.htm">E.class</a></li>
			</ul>
		</div>
	</section>
	<section id="relationship" class="g-mod g-attr">
		<h2 class="tit"><a href="relationship/index.htm">关系选择符 Relationship Selectors</a></h2>
		<div class="cont">
			<ul class="g-list g-clear">
				<li><a href="relationship/ef.htm">E F</a></li>
				<li><a href="relationship/e-child-f.htm">E&gt;F</a></li>
				<li><a href="relationship/e-adjacent-f.htm">E+F</a></li>
				<li><a href="relationship/e-brother-f.htm" class="g-color-css3-new">E~F</a></li>
			</ul>
		</div>
	</section>
	<section id="attribute" class="g-mod g-attr">
		<h2 class="tit"><a href="attribute/index.htm">属性选择符 Attribute Selectors</a></h2>
		<div class="cont">
			<ul class="g-list g-clear">
				<li><a href="attribute/att.htm">E[att]</a></li>
				<li><a href="attribute/att2.htm">E[att=&quot;val&quot;]</a></li>
				<li><a href="attribute/att3.htm">E[att~=&quot;val&quot;]</a></li>
				<li><a href="attribute/att4.htm" class="g-color-css3-new">E[att^=&quot;val&quot;]</a></li>
				<li><a href="attribute/att5.htm" class="g-color-css3-new">E[att$=&quot;val&quot;]</a></li>
				<li><a href="attribute/att6.htm" class="g-color-css3-new">E[att*=&quot;val&quot;]</a></li>
				<li><a href="attribute/att7.htm">E[att|=&quot;val&quot;]</a></li>
			</ul>
		</div>
	</section>
	<section id="pseudo-classes" class="g-mod g-attr">
		<h2 class="tit"><a href="pseudo-classes/index.htm">伪类选择符 Pseudo-Classes Selectors</a></h2>
		<div class="cont">
			<ul class="g-list g-clear">
				<li><a href="pseudo-classes/link.htm">E:link</a></li>
				<li><a href="pseudo-classes/visited.htm">E:visited</a></li>
				<li><a href="pseudo-classes/hover.htm">E:hover</a></li>
				<li><a href="pseudo-classes/active.htm">E:active</a></li>
				<li><a href="pseudo-classes/focus.htm">E:focus</a></li>
				<li><a href="pseudo-classes/lang(fr).htm">E:lang(fr)</a></li>
				<li><a href="pseudo-classes/not(s).htm" class="g-color-css3-new">E:not(s)</a></li>
				<li><a href="pseudo-classes/root.htm" class="g-color-css3-new">E:root</a></li>
				<li><a href="pseudo-classes/first-child.htm">E:first-child</a></li>
				<li><a href="pseudo-classes/last-child.htm" class="g-color-css3-new">E:last-child</a></li>
				<li><a href="pseudo-classes/only-child.htm" class="g-color-css3-new">E:only-child</a></li>
				<li><a href="pseudo-classes/nth-child(n).htm" class="g-color-css3-new">E:nth-child(n)</a></li>
				<li><a href="pseudo-classes/nth-last-child(n).htm" class="g-color-css3-new">E:nth-last-child(n)</a></li>
				<li><a href="pseudo-classes/first-of-type.htm" class="g-color-css3-new">E:first-of-type</a></li>
				<li><a href="pseudo-classes/last-of-type.htm" class="g-color-css3-new">E:last-of-type</a></li>
				<li><a href="pseudo-classes/only-of-type.htm" class="g-color-css3-new">E:only-of-type</a></li>
				<li><a href="pseudo-classes/nth-of-type(n).htm" class="g-color-css3-new">E:nth-of-type(n)</a></li>
				<li><a href="pseudo-classes/nth-last-of-type(n).htm" class="g-color-css3-new">E:nth-last-of-type(n)</a></li>
				<li><a href="pseudo-classes/empty.htm" class="g-color-css3-new">E:empty</a></li>
				<li><a href="pseudo-classes/checked.htm" class="g-color-css3-new">E:checked</a></li>
				<li><a href="pseudo-classes/enabled.htm" class="g-color-css3-new">E:enabled</a></li>
				<li><a href="pseudo-classes/disabled.htm" class="g-color-css3-new">E:disabled</a></li>
				<li><a href="pseudo-classes/target.htm" class="g-color-css3-new">E:target</a></li>
				<li><a href="pseudo-classes/@page-first.htm">@page:first</a></li>
				<li><a href="pseudo-classes/@page-left.htm">@page:left</a></li>
				<li><a href="pseudo-classes/@page-right.htm">@page:right</a></li>
			</ul>
		</div>
	</section>
	<section id="pseudo-element" class="g-mod g-attr">
		<h2 class="tit"><a href="pseudo-element/index.htm">伪对象选择符 Pseudo-Element Selectors</a></h2>
		<div class="cont">
			<ul class="g-list g-clear">
				<li><a href="pseudo-element/first-letter.htm" class="g-color-css3-change">E:first-letter/E::first-letter</a></li>
				<li><a href="pseudo-element/first-line.htm" class="g-color-css3-change">E:first-line/E::first-line</a></li>
				<li><a href="pseudo-element/before.htm" class="g-color-css3-change">E:before/E::before</a></li>
				<li><a href="pseudo-element/after.htm" class="g-color-css3-change">E:after/E::after</a></li>
				<li><a href="pseudo-element/placeholder.htm" class="g-color-css3-new">E::placeholder</a></li>
				<li><a href="pseudo-element/selection.htm" class="g-color-css3-new">E::selection</a></li>
			</ul>
		</div>
	</section>
	<section id="related" class="g-mod">
		<p class="g-color-light"><strong class="g-color-css3-change">紫色</strong> 链接表示该属性在CSS3有修改或者增加了新的属性值；<strong class="g-color-css3-new">橙色</strong> 链接表示该属性是CSS3新增属性</p>
	</section>
</section>
<footer id="ft">
	<aside id="rights" class="g-mod">
		<!-- 插入浏览器及版权信息 -->
	</aside>
</footer>
<script src="../js/jquery.js"></script>
<script src="../js/inner.js"></script>
</body>
</html>